<template>

    <div class="item-group-container">
        <!-- 顶部操作区域 -->
        <div class="top-section">
            <transition name="search-slide">
                <div class="search-area" v-show="showSearchArea">
                    <div class="search-status" v-if="hasSearchConditions">
                        <el-tag size="small" type="info">
                            当前搜索条件: {{ getSearchConditionsText() }}
                        </el-tag>
                        <el-tag size="small" type="success" style="margin-left: 10px;">
                            找到 {{ total }} 条结果
                        </el-tag>
                    </div>
                    <!-- 搜索输入框和按钮区域 -->
                    <div class="search-controls">
                        <el-input v-model="searchForm.Code" placeholder="请输入编码" class="search-input" clearable
                            @keyup.enter="handleSearch" />
                        <el-select v-model="searchForm.Type" placeholder="请选择类型" class="search-input" clearable
                            @change="handleSearch">
                            <el-option v-for="item in groupTypes" :key="item.id" :label="item.groupTypeName"
                                :value="item.id" />
                        </el-select>
                        <el-input v-model="searchForm.CustomerName" placeholder="请输入客户名称" class="search-input" clearable
                            @keyup.enter="handleSearch" />
                        <el-select v-model="searchForm.Status" placeholder="请选择状态" class="search-input" clearable
                            @change="handleSearch">
                            <el-option v-for="item in processRoutes" :key="item.Id" :label="item.RouteName"
                                :value="item.Id" />
                        </el-select>
                        <el-select v-model="searchForm.From" placeholder="请选择来源" class="search-input" clearable
                            @change="handleSearch">
                            <el-option v-for="item in froms" :key="item.id" :label="item.fromName" :value="item.id" />
                        </el-select>
                        <el-button type="primary" @click="handleSearch" class="search-btn">
                            <el-icon>
                                <Search />
                            </el-icon>
                            搜索
                        </el-button>
                        <el-button @click="clearSearch" class="clear-btn">
                            <el-icon>
                                <Close />
                            </el-icon>
                            清空
                        </el-button>
                        <el-dropdown @command="loadSearchHistory" v-if="searchHistory.length > 0">
                            <el-button class="history-btn">
                                <el-icon>
                                    <Clock />
                                </el-icon>
                                历史
                                <el-icon class="el-icon--right">
                                    <ArrowDown />
                                </el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item v-for="(item, index) in searchHistory" :key="index"
                                        :command="item">
                                        {{ getSearchHistoryText(item) }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </transition>
            <div class="utility-icons">
                <el-tooltip :content="showSearchArea ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-icon class="icon-btn" @click="toggleSearchArea" :class="{ 'active': showSearchArea }">
                        <Search />
                    </el-icon>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-icon class="icon-btn" @click="refreshData">
                        <Refresh />
                    </el-icon>
                </el-tooltip>
                <el-tooltip content="全屏" placement="top">
                    <el-icon class="icon-btn" @click="toggleFullscreen">
                        <Expand />
                    </el-icon>
                </el-tooltip>
                <el-tooltip content="设置" placement="top">
                    <el-icon class="icon-btn">
                        <Setting />
                    </el-icon>
                </el-tooltip>
                <el-tooltip content="关闭" placement="top">
                    <el-icon class="icon-btn">
                        <Close />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>

        <!-- 操作按钮区域：新增、导出、删除等主要功能 -->
        <div class="action-section">
            <div class="action-buttons">
                <el-button type="primary" @click="handleAdd" class="action-btn">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    新增
                </el-button>
                <el-button type="primary" @click="handleExport" class="action-btn">
                    <el-icon>
                        <Download />
                    </el-icon>
                    导出
                </el-button>
                <el-button @click="handleBatchDelete" class="action-btn delete-btn">
                    <el-icon>
                        <Delete />
                    </el-icon>
                    删除
                </el-button>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
            <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange" class="data-table"
                border stripe>
                <el-table-column type="selection" width="55" fixed="left" />
                <el-table-column prop="index" label="序号" width="80" align="center" fixed="left">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="编码" width="150" align="center">
                    <template #header>
                        <span>编码</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="150" align="center">
                    <template #header>
                        <span>类型</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.type).type" :color="getTagType(scope.row.type).color"
                            :style="{
                                backgroundColor: getTagType(scope.row.type).backgroundColor,
                                borderColor: getTagType(scope.row.type).borderColor,
                                color: getTagType(scope.row.type).color
                            }" size="small">
                            {{ scope.row.type }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="customerId" label="客户" width="150" align="center">
                    <template #header>
                        <span>客户</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <span v-if="scope.row.customerId != null">
                            {{ scope.row.customerCode }}|{{ scope.row.customerName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="partId" label="产品主数据" width="150" align="center">
                    <template #header>
                        <span>产品主数据</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <span v-if="scope.row.partId != null">
                            {{ scope.row.materialsCode }}|{{ scope.row.materialsName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="lineId" label="产线" width="150" align="center">
                    <template #header>
                        <span>产线</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <span v-if="scope.row.lineId != null">
                            {{ scope.row.lineCode }}|{{ scope.row.lineName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="180" align="center">
                    <template #header>
                        <span>状态</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.status).type" :color="getTagType(scope.row.status).color"
                            :style="{
                                backgroundColor: getTagType(scope.row.status).backgroundColor,
                                borderColor: getTagType(scope.row.status).borderColor,
                                color: getTagType(scope.row.status).color
                            }" size="small">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="qty" label="数量" width="150" align="center">
                    <template #header>
                        <span>数量</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="completedQty" label="已完成数量" width="150" align="center">
                    <template #header>
                        <span>已完成数量</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>

                </el-table-column>
                <el-table-column prop="routingName" label="进度" width="300" align="center">
                    <template #header>
                        <span>进度</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope" size="small">
                        <el-progress :percentage="(scope.row.completedQty / scope.row.qty * 100).toFixed(2)"
                            :stroke-width="15" striped striped-flow :duration="1" />
                    </template>
                </el-table-column>
                <el-table-column prop="planDateS" label="计划开始时间" width="150" align="center">
                    <template #header>
                        <span>计划开始时间</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        {{ moment(scope.row.planDateS).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="planDateE" label="计划结束时间" width="150" align="center">
                    <template #header>
                        <span>计划结束时间</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        {{ moment(scope.row.planDateE).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="actualDateS" label="实际开始时间" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.actualDateS == null ? "" : moment(scope.row.actualDateS).format("YYYY-MM-DD HH: mm: ss")
                        }}

                    </template>
                </el-table-column>
                <el-table-column prop="actualDateE" label="实际结束时间" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.actualDateE == null ? "" : moment(scope.row.actualDateE).format("YYYY-MM-DD HH: mm: ss")
                        }}

                    </template>
                </el-table-column>
                <el-table-column prop="inputQty" label="投入数量" width="150" align="center">
                    <template #header>
                        <span>投入数量</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="okQty" label="良品数量" width="150" align="center">
                    <template #header>
                        <span>良品数量</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <span style="color: green">
                            {{ scope.row.okQty }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="scrapedQty" label="报废数量" width="150" align="center">
                    <template #header>
                        <span>报废数量</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <span style="color: red">
                            {{ scope.row.scrapedQty }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="from" label="状态" width="180" align="center">
                    <template #header>
                        <span>状态</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        <el-tag :type="getTagType(scope.row.from)" size="small">
                            {{ scope.row.from }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sourceCode" label="源工单号" width="150" align="center">
                    <template #header>
                        <span>源工单号</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="routingMsg" label="备注" min-width="150" align="center" />
                <el-table-column prop="addProp" label="创建人" width="120" align="center" />
                <el-table-column prop="addTime" label="创建时间" width="160" align="center">
                    <template #header>
                        <span>创建时间</span>
                        <el-icon class="search-icon">
                            <Search />
                        </el-icon>
                        <el-icon class="sort-icon">
                            <Sort />
                        </el-icon>
                    </template>
                    <template #default="scope">
                        {{ moment(scope.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column prop="updTime" label="更新时间" width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.updTime == null ? "" : moment(scope.row.updTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="text" class="action-link" :disabled="scope.row.status != '初始化' ? true : false"
                            @click="updStatus(scope.row, '备料中')">
                            下发
                        </el-button>
                        <el-button type="text" @click="handleEdit(scope.row)" class="action-link">
                            编辑
                        </el-button>

                        <el-dropdown>
                            <span class="el-dropdown-link">
                                其他
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>
                                        <el-button type="text" plain @click="Open(scope.row)">
                                            工艺路线
                                        </el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item :disabled="scope.row.status != '初始化' ? true : false"
                                        @click="handleDelete(scope.row)">
                                        <el-button type="text" class="action-link delete-link">
                                            删除
                                        </el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item :disabled="scope.row.status == '初始化' ? true : false">
                                        <el-button class="action-link delete-link" type='text'
                                            :disabled="scope.row.status == '初始化' ? true : false"
                                            @click="updStatus(scope.row, '初始化')">
                                            取消发布
                                        </el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <div class="data-summary">
                共{{ total }}条数据
            </div>
            <div class="pagination-controls">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" @close="resetForm">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="编码:" prop="code">
                    <el-input placeholder="编码由系统生产(˘³˘)" disabled />
                </el-form-item>

                <el-form-item label="类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
                        <el-option v-for="item in groupTypes" :key="item.id" :label="item.groupTypeName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户:" prop="customerId">
                    <el-select v-model="form.customerId" placeholder="请选择客户" style="width: 100%">
                        <el-option v-for="item in customerIdList" :key="item.customerId"
                            :label="item.customerCode + '|' + item.customerName" :value="item.customerId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品主数据:" prop="partId">
                    <el-select v-model="form.partId" placeholder="请选择主数据" style="width: 100%">
                        <el-option v-for="item in partIdList" :key="item.materialsId"
                            :label="item.materialsCode + '|' + item.materialsName" :value="item.materialsId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="工艺路线:" prop="processRouteId">
                    <el-select v-model="form.processRouteId" placeholder="请选择工艺路线" style="width: 100%">
                        <el-option v-for="item in processRouteIdList" :key="item.id" :label="item.routingName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产线:" prop="lineId">
                    <el-select v-model="form.lineId" placeholder="请选择产线" style="width: 100%">
                        <el-option v-for="item in lineIdList" :key="item.linesId"
                            :label="item.lineCode + '|' + item.lineName" :value="item.linesId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="计划起止日期:" prop="planDateRange">
                    <el-date-picker v-model="form.planDateRange" type="daterange"
                        :key="form.planDateRange ? form.planDateRange : ''" :disabled-date="disabledDate"
                        value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期">
                        <template #default="cell">
                            <div class="el-date-table-cell">
                                <span class="el-date-table-cell__text" :class="{ 'has-dot': isHoliday(cell) }">
                                    {{ cell.date.getDate() }}
                                </span>
                            </div>
                        </template>
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="数量" prop="qty">
                    <el-input v-model="form.qty" placeholder="请输入数量" />
                </el-form-item>
                <!-- <el-form-item label="是否允许跳工序" prop="routStatus">
                    <el-radio-group v-model="form.routStatus">
                        <el-radio value="数量" size="large">数量</el-radio>
                        <el-radio value="状态" size="large">状态</el-radio>
                    </el-radio-group>

                </el-form-item> -->
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 流程图弹框  -->
        <el-dialog v-model="dialogTableVisible" title="设置流程" width="1300" align-center draggable overflow>
            <div class="flow-container">
                <VueFlow :nodes="nodes" :edges="edges" :default-viewport="{ zoom: 1 }" :min-zoom="0.2" :max-zoom="4"
                    @node-click="onNodeClick" @edge-click="onEdgeClick" @drop="onDrop" @dragover="onDragOver"
                    :node-types="nodeTypes" :default-edge-options="defaultEdgeOptions" :connect-on-click="true"
                    class="vue-flow-container" draggable="false">
                    <Background pattern-color="#7300ff" :gap="16" />
                    <MiniMap />
                </VueFlow>
                <!-- 这里是右上角保存(其实想写到右下角但是看起来比较像AI╮(╯▽╰)╭) -->
                <div class="top-container">
                    <Controls class="controls" />
                    <div class="save-btn">
                        <ElButton type="primary" class="mr-2" @click="saveFlow" disabled>保存</ElButton>
                    </div>
                </div>
                <!-- 这里是左侧节点 -->
                <div class="left-panel">
                    <div class="drag-items">
                        <ElRow :gutter="10">
                            <ElCol :span="12">
                                <div class="drag-item start-node" draggable="true"
                                    @dragstart="onDragStart($event, '开始')" @dragend="onDragEnd">
                                    <span>开始</span>
                                </div>
                            </ElCol>
                            <ElCol :span="12">
                                <div class="drag-item end-node" draggable="true" @dragstart="onDragStart($event, '结束')"
                                    @dragend="onDragEnd">
                                    <span>结束</span>
                                </div>
                            </ElCol>
                        </ElRow>
                        <ElScrollbar height="75%">
                            <div class="drag-item custom-node" draggable="true"
                                @dragstart="onDragStart($event, item.name)" @dragend="onDragEnd"
                                v-for="(item, index) in pointsList" :key="index">
                                <span>{{ item.name }}</span>
                            </div>
                        </ElScrollbar>
                    </div>
                </div>
                <!-- 这里是右侧设置 -->
                <div class="right-panel" v-if="updateState">
                    <div class="panel-header">
                        <span>{{
                            updateState === "edge" ? "连接线规则配置" : "点位规则配置"
                            }}</span>
                        <ElButton circle class="close-btn" @click="updateState = ''">×</ElButton>
                    </div>
                    <div class="panel-content" v-if="updateState === 'edge'">
                        <ElInput v-model="selectedEdgeData.label" placeholder="线名称" clearable />
                        <ElSelect v-model="selectedEdgeData.type" placeholder="线类型">
                            <ElOption label="折线" value="smoothstep" />
                            <ElOption label="曲线" value="default" />
                            <ElOption label="直线" value="straight" />
                        </ElSelect>
                        <ElSelect v-model="selectedEdgeData.animated" placeholder="线动画">
                            <ElOption label="开启" :value="true" />
                            <ElOption label="关闭" :value="false" />
                        </ElSelect>
                        <ElButton type="primary" @click="updateEdge">修改</ElButton>
                        <ElButton type="danger" @click="removeEdge">删除</ElButton>
                    </div>
                    <div class="panel-content" v-else>
                        <ElInput v-model="selectedNodeData.data.label" placeholder="点位名称" clearable />
                        <ElButton type="primary" @click="updateNodeLabel">修改</ElButton>
                        <ElButton type="danger" @click="removeNode">删除</ElButton>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>


</template>
<script lang="ts" setup>
//#region 导入 和生命周期
import { ref, markRaw, reactive, computed, onMounted, onUnmounted } from "vue";
import {
    VueFlow,
    useVueFlow,
    MarkerType,
    type Node,
    type Edge,
    type Connection
} from "@vue-flow/core";
import { Background } from '@vue-flow/background'
import { Controls } from "@vue-flow/controls";
import { MiniMap } from "@vue-flow/minimap";
import '@vue-flow/controls/dist/style.css'
import "@vue-flow/core/dist/style.css";
import '@vue-flow/minimap/dist/style.css'
import "@vue-flow/core/dist/theme-default.css";
import CustomNode from "../ProcessManagement/CustomNode.vue";
import {
    ElMessageBox,
    ElNotification,
    ElButton,
    ElRow,
    ElCol,
    ElScrollbar,
    ElInput,
    ElSelect,
    ElOption,
    ElMessage
} from "element-plus";
import {
    Plus,
    Download,
    Delete,
    Grid,
    Search,
    Refresh,
    Expand,
    Setting,
    Close,
    Sort,
    Clock,
    ArrowDown
} from '@element-plus/icons-vue'
import Maxios from "@/Http/MesHelp";
import moment from "moment";
import html2canvas from 'html2canvas';
import dayjs from 'dayjs';
const { vueFlowRef } = useVueFlow();
// ==================== 生命周期钩子 ====================
// 组件挂载时初始化数据
onMounted(() => {
    getDayly()
    getItemGroups() // 获取列表数据
    GetPoints()
    getPartIdList()
    getLineIdList()
    getCustomerIdList()
    getProcessRouteIdList()
    // 添加键盘事件监听器
    document.addEventListener('keydown', handleKeydown)
})

// 组件卸载时清理事件监听器
onUnmounted(() => {
    document.removeEventListener('keydown', handleKeydown) // 移除键盘事件监听器
})
//#endregion

//#region vue-flow
// 使用VueFlow组合式API
const {
    onInit,
    onNodeDragStop,
    onConnect,
    addEdges,
    getNodes,
    getEdges,
    setEdges,
    setNodes,
    screenToFlowCoordinate,
    onNodesInitialized,
    updateNode, // 从VueFlow导入的updateNode函数
    addNodes,
    findNode
} = useVueFlow();
var rows = ref({
    "routingName": "",
    "routingImg": "",
    "routingImgJSON": "",
    "routingTypeId": "",
    "routStatus": "",
    "routingMsg": "",
    "id": "",
    "addProp": "印章",
    "addTime": "",
    "updProp": "印章",
    "updTime": "",
    "isDel": false
})

const dialogTableVisible = ref(false)
//打开vueflow及内部数据显示
const Open = (row: any) => {
    rows.value = row
    //判断json是否有值,有则赋值,无,则默认
    nodes.value = [{
        id: "5",
        type: "input",
        data: { label: "开始" },
        position: { x: 235, y: 100 },
        class: "round-start"
    },
    {
        id: "7",
        type: "output",
        data: { label: "结束" },
        position: { x: 235, y: 300 },
        class: "round-stop"
    }]
    edges.value = []
    if (row.routingImgJSON != null) {
        var msg = JSON.parse(row.routingImgJSON)
        console.log(msg);
        nodes.value = msg.nodes
        edges.value = msg.edges
    }
    dialogTableVisible.value = true
}

//获取节点赋值
const GetPoints = async () => {
    const response = await Maxios.get(`${API_BASE_URL}/Process/GetProcess`, {
        params: {
            ProcessCode: null,
            ProcessName: null,
            StepTypeId: null,
            PageIndex: 1, // 当前页码
            PageSize: 99 // 每页显示数量
        }
    })

    if (response.data.code === 200) {
        // 假设接口返回的每个项中，点位名称字段为ProcessName，转换为name属性
        pointsList.value = response.data.data.list.map((item: any) => ({
            name: item.processName || '未命名点位' // 若字段不同，替换为实际字段名
        }));
        console.log("处理后的点位列表：", pointsList.value);

    }
}
// 默认边选项
const defaultEdgeOptions = ref({
    type: "smoothstep", // 默认边类型
    animated: true, // 是否启用动画
    markerEnd: {
        type: MarkerType.ArrowClosed, // 默认箭头样式
        color: "black"
    }
});

// 节点数据
const nodes = ref<Node[]>([
    {
        id: "5",
        type: "input",
        data: { label: "开始" },
        position: { x: 235, y: 100 },
        class: "round-start"
    },
    {
        id: "6",
        type: "custom", // 使用自定义类型
        data: { label: "工位：流程1" },
        position: { x: 200, y: 200 },
        class: "light"
    },
    {
        id: "7",
        type: "output",
        data: { label: "结束" },
        position: { x: 235, y: 300 },
        class: "round-stop"
    }
]);

// 节点类型
const nodeTypes = ref<any>({
    custom: markRaw(CustomNode) // 注册自定义节点类型
});

// 边数据
const edges = ref<Edge[]>([
    {
        id: "e4-5",
        type: "straight",
        source: "5",
        target: "6",
        sourceHandle: "top-6",
        label: "测试1",
        markerEnd: {
            type: MarkerType.ArrowClosed, // 使用闭合箭头
            color: "black"
        }
    },
    {
        id: "e4-6",
        type: "straight",
        source: "6",
        target: "7",
        sourceHandle: "bottom-6",
        label: "测试2",
        markerEnd: {
            type: MarkerType.ArrowClosed, // 使用闭合箭头
            color: "black"
        }
    }
]);

// 初始化
onInit(vueFlowInstance => {
    vueFlowInstance.fitView();
});
function doScreenshot() {
    if (!vueFlowRef.value) {
        console.warn('VueFlow element not found');
        return;
    }
    console.log(vueFlowRef.value);
    //   capture(vueFlowRef.value, { shouldDownload: true });
}
// 节点拖拽停止事件
onNodeDragStop(({ event, node }) => {
    console.log("Node Drag Stop", { event, node });
});

// 连接事件
onConnect((connection: Connection) => {
    addEdges({ ...connection, type: defaultEdgeOptions.value.type });
});

// 点位列表---------------------------------------------------------------------------
const pointsList = ref([{ name: "测试1" }, { name: "测试2" }]);
// 更新状态（节点或边）
const updateState = ref<"node" | "edge" | "">("");

// 选中的边数据
const selectedEdgeData = reactive<{
    id: string;
    type?: string;
    label?: string;
    animated?: boolean;
}>({ id: "", type: undefined, label: undefined, animated: undefined });

// 边点击事件
const onEdgeClick = ({ edge }: { edge: Edge }) => {
    Object.assign(selectedEdgeData, edge); // 更新选中的边数据
    updateState.value = "edge";
    console.log("选中的边：", selectedEdgeData);
};

// 更新边
function updateEdge() {
    const allEdges = getEdges.value;
    setEdges(
        allEdges.map(e =>
            e.id === selectedEdgeData.id
                ? { ...e, type: selectedEdgeData.type, label: selectedEdgeData.label, animated: selectedEdgeData.animated }
                : e
        )
    );
}

// 删除边
function removeEdge() {
    ElMessageBox.confirm("是否要删除该连线？", "删除连线", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        const allEdges = getEdges.value;
        setEdges(allEdges.filter(e => e.id !== selectedEdgeData.id));
        ElNotification({
            type: "success",
            message: "连线删除成功"
        });
        updateState.value = "";
        Object.assign(selectedEdgeData, { id: "", type: undefined, label: undefined, animated: undefined });
    });
}

// 选中的节点数据
const selectedNodeData = reactive<{
    id: string;
    data: { label: string };
    type: string;
    position: { x: number; y: number };
    class: string;
}>({
    id: "",
    data: { label: "" },
    type: "",
    position: { x: 0, y: 0 },
    class: ""
});

// 节点点击事件
const onNodeClick = ({ node }: { node: Node }) => {
    Object.assign(selectedNodeData, node); // 更新选中的节点数据
    updateState.value = "node";
    console.log("选中的节点：", node);
};

// 更新节点标签（重命名以避免冲突）
function updateNodeLabel() {
    updateNode(selectedNodeData.id, {
        data: {
            label: selectedNodeData.data.label
        }
    });
}

// 删除节点
function removeNode() {
    ElMessageBox.confirm("是否要删除该点位？", "删除点位", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        const allNodes = getNodes.value;
        setNodes(allNodes.filter(e => e.id !== selectedNodeData.id));
        const allEdges = getEdges.value;
        setEdges(
            allEdges.filter(
                e =>
                    e.source !== selectedNodeData.id &&
                    e.target !== selectedNodeData.id
            )
        );
        ElNotification({
            type: "success",
            message: "点位删除成功"
        });
        updateState.value = "";
        Object.assign(selectedNodeData, {
            id: "",
            data: { label: "" },
            type: "",
            position: { x: 0, y: 0 },
            class: ""
        });
    });
}

// 拖拽项
const dragItem = ref<Node | null>(null);

// 拖拽开始事件
function onDragStart(event: DragEvent, state: string) {
    if (!event.dataTransfer) return;

    event.dataTransfer.setData("application/vueflow", "true");
    event.dataTransfer.effectAllowed = "move";

    dragItem.value = {
        id: `node-${Date.now()}`,
        data: {
            label:
                state === "开始" ? "开始" : state === "结束" ? "结束" : state
        },
        type: state === "开始" ? "input" : state === "结束" ? "output" : "custom",
        position: { x: 0, y: 0 },
        class:
            state === "开始"
                ? "round-start"
                : state === "结束"
                    ? "round-stop"
                    : "light"
    };
}

// 拖拽结束事件
function onDragEnd() {
    dragItem.value = null;
}

// 拖拽经过事件
function onDragOver(event: DragEvent) {
    event.preventDefault();
    if (!event.dataTransfer) return;

    event.dataTransfer.dropEffect = "move";
}

// 放置事件
function onDrop(event: DragEvent) {
    event.preventDefault();

    if (!dragItem.value) return;

    const position = screenToFlowCoordinate({
        x: event.clientX,
        y: event.clientY
    });

    const newNode = {
        ...dragItem.value,
        position
    };

    const { off } = onNodesInitialized(() => {
        const node = findNode(newNode.id);
        if (node) {
            updateNode(newNode.id, {
                position: {
                    x: node.position.x - node.dimensions.width / 2,
                    y: node.position.y - node.dimensions.height / 2
                }
            });
        }
        off();
    });

    addNodes(newNode);
    dragItem.value = null;
}

const saveFlow = async () => {
    try {
        // 1. 收集基础数据（流程图数据、流程ID）
        const flowData = {
            nodes: getNodes.value,
            edges: getEdges.value
        };
        const flowDataJson = JSON.stringify(flowData);

        if (!rows.value.id) {
            ElMessage.error('未找到流程ID，无法保存');
            return;
        }

        // 2. 生成流程图截图
        const vueFlowContainer = document.querySelector('.vue-flow-container');
        if (!(vueFlowContainer instanceof HTMLElement)) {
            ElMessage.error('未找到流程图容器，无法生成截图');
            return;
        }

        const canvas = await html2canvas(vueFlowContainer, {
            useCORS: true,
            scale: 2, // 提高清晰度
            logging: false,
            backgroundColor: '#ffffff' // 确保背景为白色
        });

        // 3. 第一步：上传截图到后端，获取图片保存路径
        canvas.toBlob(async (blob) => {
            if (!blob) {
                ElMessage.error('截图生成失败');
                return;
            }

            // 3.1 构造截图上传的FormData
            const screenshotForm = new FormData();
            screenshotForm.append('file', blob, `flow-${Date.now()}.png`);

            // 3.2 调用截图上传接口（假设接口为：/api/Process/UploadScreenshot）
            const uploadRes = await Maxios.post('/api/Images/UploadImagesAsync', screenshotForm, {
                /*headers: { 'Content-Type': 'multipart/form-data' }*/
            });

            if (uploadRes.data.code !== 200 || !uploadRes.data.data?.imageUrl) {
                ElMessage.error('截图上传失败：' + (uploadRes.data.message || '未返回图片路径'));
                return;
            }

            // 3.3 从返回结果中获取图片路径
            console.log(uploadRes);

            const imageUrl = uploadRes.data.data.imageUrl;
            ElMessage.success('截图上传成功');

            // 4. 第二步：用图片路径 + JSON数据更新流程记录
            // 4.1 构造更新数据（包含图片路径和流程图JSON）

            rows.value.routingImg = imageUrl
            rows.value.routingImgJSON = flowDataJson
            // 4.2 调用数据更新接口（假设接口为：/api/Process/UpdateRoutingData）
            const updateRes = await Maxios.put('/api/Process/RoutingUpdate', rows.value);

            if (updateRes.data.code === 200) {
                ElMessage.success('流程图数据保存成功');
                dialogTableVisible.value = false; // 关闭对话框
                getItemGroups(); // 刷新列表
            } else {
                ElMessage.error('数据更新失败：' + (updateRes.data.message || '未知错误'));
            }
        }, 'image/png');
    } catch (error) {
        console.error('保存流程失败:', error);
        ElMessage.error('保存过程发生错误');
    }
};
// };
//#endregion

//#region 增删改查基本操作盘

// 接口定义
interface ItemGroup {
    id: number
    addProp: string
    addTime: string
    updProp?: string
    updTime?: string
    isDel: boolean
    /*--------下部为替换部分---------*/
    code: string,
    type: string,
    status: string,
    from: string,
    sourceCode: string,
    processRouteId: string,
    partId: string,
    lineId: string,
    qty: string,
    completedQty: string,
    planDateS: string,
    planDateE: string,
    actualDateS: string,
    actualDateE: string,
    inputQty: string,
    okQty: string,
    scrapedQty: string,
    customerId: string,
    remark: string,
    lineCode: string,
    lineName: string,
    materialsCode: string,
    materialsName: string,
    customerCode: string,
    customerName: string,
    routingImgJSON: string
}

interface GroupType {
    id: string
    groupTypeName: string
}

interface ProcessRoute {
    Id: string
    RouteName: string
}

interface Froms {
    id: string,
    fromName: string,
}
interface Custormers {
    customerId: number,
    customerCode: string,
    customerName: string
}
interface Lines {
    linesId: number,
    lineCode: string,
    lineName: string
}
interface materials {
    materialsId: number,
    materialsCode: string,
    materialsName: string
}
interface Routing {
    id: number,
    routingName: string,
}
// ==================== 响应式数据定义 ====================
const loading = ref(false) // 表格加载状态
const tableData = ref<ItemGroup[]>([]) // 表格数据
const selectedRows = ref<ItemGroup[]>([]) // 选中的行数据
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示数量
const total = ref(0) // 总数据量
const dialogVisible = ref(false) // 对话框显示状态
const dialogTitle = ref('新增') // 对话框标题
const isEdit = ref(false) // 是否为编辑模式
const groupTypes = ref<GroupType[]>([{ id: '正常', groupTypeName: '正常' }, { id: '委外', groupTypeName: '委外' }, { id: '维修', groupTypeName: '维修' }, { id: '自建工单', groupTypeName: '自建工单' }]) // 群组类型数据
const processRoutes = ref<ProcessRoute[]>([{ Id: '初始化', RouteName: '初始化' }, { Id: '备料中', RouteName: '备料中' }, { Id: '已开工', RouteName: '已开工' }, { Id: '暂停', RouteName: '暂停' }, { Id: '完工', RouteName: '完工' }, { Id: '结案', RouteName: '结案' }]) // 工艺路线数据
const froms = ref<Froms[]>([{ id: 'Mes', fromName: 'Mes' }, { id: 'Erp', fromName: 'Erp' }]) // 来源数据
const showSearchArea = ref(true) // 搜索区域显示状态
const searchHistory = ref<Array<{ ItemCode: string, ItemName: string, ItemTypeId: string, ItemStatus: string, ItemFrom: string }>>([]) // 搜索历史记录

//======================添加下拉获取=======================\\
const partIdList = ref<materials[]>([])
const lineIdList = ref<Lines[]>([])
const customerIdList = ref<Custormers[]>([])
const processRouteIdList = ref<Routing[]>([])
const getPartIdList = async () => {
    const res = await Maxios.get('/api/Process/GetsMaterials')
    if (res.data.code === 200) {
        partIdList.value = res.data.data
    }
}
const getLineIdList = async () => {
    const res = await Maxios.get('/api/Process/GetsLines')
    if (res.data.code === 200) {
        lineIdList.value = res.data.data
    }
}
const getCustomerIdList = async () => {
    const res = await Maxios.get('/api/Process/GetCustomersss')
    if (res.data.code === 200) {
        customerIdList.value = res.data.data
    }
}
const getProcessRouteIdList = async () => {
    const res = await Maxios.get('/api/Process/GetProccessRouting')
    if (res.data.code === 200) {
        processRouteIdList.value = res.data.data
        console.log(processRouteIdList);

    }
}
//======================日期获取及操作=======================\\
const dateRange = ref<string[]>([])
const getDayly = () => {
    Maxios.get('/api/Process/GetDayly', {
        params: {
            Type: 2
        }
    }).then(res => {
        dateRange.value = res.data.data.map((item: { id: any; }) => item.id)
        console.log(res.data.data);

    })
}

interface DateCell {
    date: Date;
    dayjs: any;
    selected: boolean;
    disabled: boolean;
}


const isHoliday = (cell: DateCell) => {
    return dateRange.value.includes(cell.dayjs.format('YYYY-MM-DD'))
}


// 禁用日期函数
const disabledDate = (time: Date) => {
    const dateStr = moment(time).format('YYYY-MM-DD')
    return dateRange.value.includes(dateStr)
}


// ==================== 表单数据定义 ====================
// 搜索表单数据
const searchForm = reactive({
    Code: '', // 群组编码搜索条件
    Type: '', // 群组名称搜索条件
    CustomerName: '', // 群组类型搜索条件
    Status: '', // 群组类型搜索条件
    From: '', // 群组类型搜索条件
})

// 新增/编辑表单数据
const formRef = ref() // 表单引用
const form = reactive({
    id: 0, // 物料群组ID
    code: "",
    type: "",
    status: "初始化",
    from: "",
    sourceCode: "",
    processRouteId: "",
    partId: "",
    lineId: "",
    qty: "",
    completedQty: "",
    planDateS: "",
    planDateE: "",
    actualDateS: "",
    actualDateE: "",
    inputQty: "",
    okQty: "",
    scrapedQty: "",
    customerId: "",
    remark: "",
    lineCode: "",
    lineName: "",
    materialsCode: "",
    materialsName: "",
    customerCode: "",
    customerName: "",
    routingImgJSON: "",
    planDateRange: [] as string[],
    addProp: localStorage.getItem("userNickname") || '' ,// 创建人
    addTime:''
})

// 新建表单验证规则
const rules = {
    type: [
        { required: true, message: '请选择类型', trigger: 'change' }
    ],
    customerId: [
        { required: true, message: '请选择客户', trigger: 'change' }
    ],
    partId: [
        { required: true, message: '请选择主数据', trigger: 'change' }
    ],
    lineId: [
        { required: true, message: '请选择产线', trigger: 'change' }
    ],
    remark: [
        { required: true, message: '请输入详情', trigger: 'blur' }
    ],
    processRouteId: [
        { required: true, message: '请选择工艺路线', trigger: 'change' }
    ],
    qty: [
        { required: true, message: '请输入数量', trigger: 'blur' },
        { pattern: /^[0-9]+$/, message: '数量必须为数字', trigger: 'blur' }
    ],
    planDateRange: [
        { required: true, message: '请选择计划起止日期', trigger: 'change' }
    ]
}

// ==================== API接口方法 ====================
// API基础URL配置
const API_BASE_URL = '/api'  // 后端控制器路由为 api/[controller]/[action]

// 获取物料群组列表数据
const getItemGroups = async () => {
    loading.value = true
    try {
        // 调用后端API获取物料群组数据（包含分页参数）
        const response = await Maxios.get(`${API_BASE_URL}/Process/GetProduct`, {
            params: {
                Code: searchForm.Code || null,
                Type: searchForm.Type || null,
                CustomerName: searchForm.CustomerName || null,
                Status: searchForm.Status || null,
                From: searchForm.From || null,
                PageIndex: currentPage.value, // 当前页码
                PageSize: pageSize.value // 每页显示数量
            }
        })

        if (response.data.code === 200) {
            const result = response.data.data // 获取分页结果对象

            console.log('API返回数据:', result)

            // 直接使用后端返回的数据（已包含类型名称和工艺路线名称）
            tableData.value = result.list || []
            total.value = result.count || 0
            currentPage.value = result.pageIndex || 1
            pageSize.value = result.pageSize || 10

            console.log('数据设置完成:', {
                total: total.value,
                tableDataLength: tableData.value.length,
                tableData: tableData.value
            })
        } else {
            ElMessage.error(response.data.message || '获取数据失败')
        }
    }
    catch (error) {
        console.error('获取物料群组失败:', error)
        console.log('API调用详情:', {
            url: `${API_BASE_URL}/ItemGroup/ItemGroupQuery`,
            fullUrl: `http://localhost:5293${API_BASE_URL}/ItemGroup/ItemGroupQuery`,
            params: {
                // ProcessCode: searchForm.ProcessCode || null,
                RoutingName: searchForm.Type || null,
                ItemMsg: null,
                CustomerName: searchForm.CustomerName,
                PageIndex: currentPage.value,
                PageSize: pageSize.value
            }
        })
        // 如果API调用失败，使用模拟数据
        console.log('使用模拟数据...')
        const mockData: ItemGroup[] = [
            {
                id: 1,
                code: "string",
                type: "string",
                status: "string",
                from: "string",
                sourceCode: "string",
                processRouteId: "string",
                partId: "string",
                lineId: "string",
                qty: "string",
                completedQty: "string",
                planDateS: "string",
                planDateE: "string",
                actualDateS: "string",
                actualDateE: "string",
                inputQty: "string",
                okQty: "string",
                scrapedQty: "string",
                customerId: "string",
                remark: "string",
                lineCode: "string",
                lineName: "string",
                materialsCode: "string",
                materialsName: "string",
                customerCode: "string",
                customerName: "string",
                routingImgJSON: "string",
                addProp: '(test)管理员',
                addTime: '2024-01-15 10:30:00',
                updTime: '',
                isDel: true
            },
            {
                id: 2,
                code: "string",
                type: "string",
                status: "string",
                from: "string",
                sourceCode: "string",
                processRouteId: "string",
                partId: "string",
                lineId: "string",
                qty: "string",
                completedQty: "string",
                planDateS: "string",
                planDateE: "string",
                actualDateS: "string",
                actualDateE: "string",
                inputQty: "string",
                okQty: "string",
                scrapedQty: "string",
                customerId: "string",
                remark: "string",
                lineCode: "string",
                lineName: "string",
                materialsCode: "string",
                materialsName: "string",
                customerCode: "string",
                customerName: "string",
                routingImgJSON: "string",
                addProp: '(test)管理员',
                addTime: '2024-01-16 14:20:00',
                updTime: '',
                isDel: true
            },
            {
                id: 3,
                code: "string",
                type: "string",
                status: "string",
                from: "string",
                sourceCode: "string",
                processRouteId: "string",
                partId: "string",
                lineId: "string",
                qty: "string",
                completedQty: "string",
                planDateS: "string",
                planDateE: "string",
                actualDateS: "string",
                actualDateE: "string",
                inputQty: "string",
                okQty: "string",
                scrapedQty: "string",
                customerId: "string",
                remark: "string",
                lineCode: "string",
                lineName: "string",
                materialsCode: "string",
                materialsName: "string",
                customerCode: "string",
                customerName: "string",
                routingImgJSON: "string",
                addProp: '(test)管理员',
                addTime: '2024-01-17 09:15:00',
                updTime: '',
                isDel: true
            }
        ]

        // 过滤数据
        let filteredData = mockData
        if (searchForm.Code) {
            filteredData = filteredData.filter(item =>
                item.code.toLowerCase().includes(searchForm.Code.toLowerCase())
            )
        }
        if (searchForm.Type) {
            filteredData = filteredData.filter(item =>
                item.type.toLowerCase().includes(searchForm.Type.toLowerCase())
            )
        }
        if (searchForm.CustomerName) {
            filteredData = filteredData.filter(item =>
                item.customerName.toLowerCase().includes(searchForm.CustomerName.toLowerCase()))
        }
        if (searchForm.Status) {
            filteredData = filteredData.filter(item =>
                item.status.toLowerCase().includes(searchForm.Status.toLowerCase()))
        }
        if (searchForm.From) {
            filteredData = filteredData.filter(item =>
                item.from.toLowerCase().includes(searchForm.From.toLowerCase()))
        }

        total.value = filteredData.length
        const start = (currentPage.value - 1) * pageSize.value
        const end = start + pageSize.value
        tableData.value = filteredData.slice(start, end)
        console.log('模拟数据分页:', {
            total: total.value,
            currentPage: currentPage.value,
            pageSize: pageSize.value,
            start,
            end,
            dataLength: tableData.value.length
        })
        console.log('模拟数据设置完成:', {
            total: total.value,
            tableDataLength: tableData.value.length,
            tableData: tableData.value
        })
    } finally {
        loading.value = false
    }
}

// ==================== 业务逻辑方法 ====================
// 根据类型ID获取对应的标签样式类型
// 定义标签类型接口
interface TagType {
    type: string;
    color: string;
    backgroundColor: string;
    borderColor: string;
}

const getTagType = (typeId: string): TagType => {
    const typeMap: { [key: string]: TagType } = {
        初始化: {
            type: 'danger',
            color: '#F56C6C',
            backgroundColor: '#FEF0F0',
            borderColor: '#FBC4C4'
        },
        备料中: {
            type: 'success',
            color: '#67C23A',
            backgroundColor: '#F0F9FF',
            borderColor: '#C2E7B0'
        },    // 原材料 - 红色标签
        备料完成: {
            type: 'warning',
            color: '#E6A23C',
            backgroundColor: '#FDF6EC',
            borderColor: '#F5DAB1'
        },   // 成品 - 橙色标签
        已开工: {
            type: 'primary',
            color: '#a8d8ea',
            backgroundColor: '#aa96da',
            borderColor: '#aa96da'
        },      // 上工件 - 蓝色标签
        暂停: {
            type: 'primary',
            color: '#409EFF',
            backgroundColor: '#ECF5FF',
            borderColor: '#B3D8FF'
        },    // 半成品 - 绿色标签
        完工: {
            type: 'primary',
            color: '#48466d',
            backgroundColor: '#48466d',
            borderColor: '#48466d'
        },       // 完工 - 灰色标签
        结案: {
            type: 'primary',
            color: '#f9ed69',
            backgroundColor: '#f08a5d',
            borderColor: '#b83b5e'
        },      // 结案 - 红色标签

        正常: {
            type: 'primary',
            color: '#409EFF',
            backgroundColor: '#ECF5FF',
            borderColor: '#B3D8FF'
        },
        委外: {
            type: 'primary',
            color: 'rgb(224, 115, 224)',
            backgroundColor: 'rgb(242, 225, 229)',
            borderColor: 'rgb(252, 240, 252)'
        },
        维修: {
            type: 'primary',
            color: '#1fab89',
            backgroundColor: '#62d2a2',
            borderColor: '#9df3c4'
        },
        自建工单: {
            type: 'primary',
            color: '#cadefc',
            backgroundColor: '#c3bef0',
            borderColor: '#cca8e9'
        },
    }
    return typeMap[typeId] || 'info' // 默认返回蓝色标签
}

// 新增物料群组
const handleAdd = () => {
    isEdit.value = false // 设置为新增模式
    dialogTitle.value = '新增'
    dialogVisible.value = true // 显示对话框
    resetForm() // 重置表单数据
}

// 编辑物料群组
const handleEdit = (row: ItemGroup) => {
    isEdit.value = true // 设置为编辑模式
    dialogTitle.value = '编辑'
    dialogVisible.value = true // 显示对话框
    console.log(row);
    form.planDateRange = [row.planDateS, row.planDateE]
    // 将日期范围设置为表单的日期范围字段
    Object.assign(form, row) // 将行数据填充到表单中
    console.log(form);
}

// 删除单个物料群组
const handleDelete = async (row: ItemGroup) => {
    try {
        // 确认删除操作
        ElMessageBox.confirm('确定要删除这个物料群组吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(
            () =>{            

            // 调用删除API
            const response =  Maxios.delete(`${API_BASE_URL}/Process/ProductDelete`, { data: { row, Id: row.id, AddProp: row.addProp, Code: row.code, From: row.from, Type: row.type, Remark: row.remark, Status: row.status, SourceCode: row.sourceCode,ActualDateE: row.actualDateE,ActualDateS: row.actualDateS,PlanDateS: row.planDateS,PlanDateE: row.planDateE,AddTime:row.addTime,CompletedQty:row.completedQty,CustomerId:row.customerId,InputQty:row.inputQty,LineId:row.lineId,OkQty:row.okQty,PartId:row.partId,ProcessRouteId:row.processRouteId,Qty:row.qty,ScrapedQty:row.scrapedQty } }).then(response => {
                if (response.data.code === 200) {
                    ElMessage.success('删除成功')
                    getItemGroups() // 刷新数据
                } else {
                    ElMessage.error(response.data.message || '删除失败')
                }
            })
    });

    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除失败:', error)
            ElMessage.error('删除失败')
        }
    }
    getItemGroups()
}

// 批量删除物料群组
const handleBatchDelete = async () => {
    if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要删除的项目')
        return
    }

    try {
        // 确认批量删除操作
        await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个项目吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })

        // 批量删除：逐个调用删除API
        const deletePromises = selectedRows.value.map(row =>
            Maxios.post(`${API_BASE_URL}/Process/RoutingDelete`, { data: { row, Id: row.id, AddProp: row.addProp, Code: row.code, From: row.from, Type: row.type, Remark: row.remark, Status: row.status, SourceCode: row.sourceCode,ActualDateE: row.actualDateE,ActualDateS: row.actualDateS,PlanDateS: row.planDateS,PlanDateE: row.planDateE,AddTime:row.addTime,CompletedQty:row.completedQty,CustomerId:row.customerId,InputQty:row.inputQty,LineId:row.lineId,OkQty:row.okQty,PartId:row.partId,ProcessRouteId:row.processRouteId,Qty:row.qty,ScrapedQty:row.scrapedQty } })
        )

        await Promise.all(deletePromises)
        ElMessage.success('批量删除成功')
        getItemGroups() // 刷新数据
    } catch (error) {
        if (error !== 'cancel') {
            console.error('批量删除失败:', error)
            ElMessage.error('批量删除失败')
        }
    }
}

// 导出物料群组数据（功能待开发）
const handleExport = () => {
    ElMessage.info('导出功能开发中...')
}

// 提交表单（新增或编辑物料群组）
const submitForm = async () => {
    if (!formRef.value) return

    try {
        // 表单验证
        await formRef.value.validate()
        // 处理日期范围
        if (form.planDateRange && Array.isArray(form.planDateRange)) {
            form.planDateS = form.planDateRange[0]
            form.planDateE = form.planDateRange[1]
        }
        // 准备请求数据
        const requestData = isEdit.value ? { ...form } : { ...form, AddProp: localStorage.getItem('userNickname') || '' }
        console.log(isEdit.value);

        // 根据操作类型调用不同的API
        if (isEdit.value) {
            // 编辑操作：调用更新API
            const response = await Maxios.put(`${API_BASE_URL}/Process/ProductUpdate`,  {Id:requestData.id,AddProp:requestData.addProp,Code:requestData.code,From:requestData.from,Type:requestData.type,Remark:requestData.remark,Status:requestData.status,SourceCode:requestData.sourceCode,ActualDateE:requestData.actualDateE,ActualDateS:requestData.actualDateS,PlanDateS:requestData.planDateS,PlanDateE:requestData.planDateE,AddTime:requestData.addTime,CompletedQty:requestData.completedQty,CustomerId:requestData.customerId,InputQty:requestData.inputQty,LineId:requestData.lineId,OkQty:requestData.okQty,PartId:requestData.partId,ProcessRouteId:requestData.processRouteId,Qty:requestData.qty,ScrapedQty:requestData.scrapedQty} )
            if (response.data.code === 200) {
                ElMessage.success(response.data.message)
            } else {
                ElMessage.error(response.data.message)
                return
            }
        } else {
            // 新增操作：调用添加API
            // requestData.routStatus = "0"
            const response = await Maxios.post(`${API_BASE_URL}/Process/ProductCreate`, requestData)
            if (response.data.code === 200) {
                ElMessage.success('添加成功')
            } else {
                ElMessage.error(response.data.message)
                return
            }
        }

        dialogVisible.value = false
        getItemGroups() // 刷新数据列表
    } catch (error) {
        console.error('提交失败:', error)
        ElMessage.error('操作失败')
    }
}

//事已至此写个简单的修改罢
const updStatus = async (row: any, state: any) => {
    row.status = state
    const response = await Maxios.put(`${API_BASE_URL}/Process/ProductUpdate`,  { row, Id: row.id, AddProp: row.addProp, Code: row.code, From: row.from, Type: row.type, Remark: row.remark, Status: row.status, SourceCode: row.sourceCode,ActualDateE: row.actualDateE,ActualDateS: row.actualDateS,PlanDateS: row.planDateS,PlanDateE: row.planDateE,AddTime:row.addTime,CompletedQty:row.completedQty,CustomerId:row.customerId,InputQty:row.inputQty,LineId:row.lineId,OkQty:row.okQty,PartId:row.partId,ProcessRouteId:row.processRouteId,Qty:row.qty,ScrapedQty:row.scrapedQty } )
    if (response.data.code === 200) {
        ElMessage.success(response.data.message)
    } else {
        ElMessage.error(response.data.message)
        return
    }
    getItemGroups() // 刷新数据列表
}

// 重置表单数据到初始状态
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields() // 重置表单验证状态
    }
    // 重置表单数据为默认值
    Object.assign(form, {
        Id: 0,
        routingName: '', // 工艺路线名称
        routingImg: '', // 工艺路线图
        routingImgJSON: '', // 工艺路线流程
        routingTypeId: "", // 工艺路线类型
        routStatus: "", // 工艺路线状态
        routingMsg: "",//工艺路线描述
        AddProp: ''
    })
}

// 处理表格行选择变化
const handleSelectionChange = (selection: ItemGroup[]) => {
    selectedRows.value = selection // 更新选中的行数据
}

// 处理分页大小变化
const handleSizeChange = (size: number) => {
    console.log('分页大小变化:', { oldSize: pageSize.value, newSize: size })
    pageSize.value = size // 更新每页显示数量
    currentPage.value = 1 // 重置到第一页
    getItemGroups() // 重新获取数据（后端会处理分页）
}

// 处理当前页码变化
const handleCurrentChange = (page: number) => {
    console.log('页码变化:', { oldPage: currentPage.value, newPage: page })
    currentPage.value = page // 更新当前页码
    getItemGroups() // 重新获取数据（后端会处理分页）
}

// 执行搜索操作
const handleSearch = () => {
    currentPage.value = 1 // 重置到第一页

    // 保存搜索历史记录
    if (hasSearchConditions.value) {
        const currentSearch = {
            ItemCode: searchForm.Code,
            ItemName: searchForm.Type,
            ItemTypeId: searchForm.CustomerName,
            ItemStatus: searchForm.Status,
            ItemFrom: searchForm.From,
        }

        // 避免重复添加相同的搜索条件
        const exists = searchHistory.value.some(item =>
            item.ItemCode === currentSearch.ItemCode &&
            item.ItemName === currentSearch.ItemName &&
            item.ItemTypeId === currentSearch.ItemTypeId &&
            item.ItemStatus === currentSearch.ItemStatus &&
            item.ItemFrom === currentSearch.ItemFrom
        )

        if (!exists) {
            searchHistory.value.unshift(currentSearch) // 添加到历史记录开头
            // 只保留最近10条搜索历史
            if (searchHistory.value.length > 10) {
                searchHistory.value = searchHistory.value.slice(0, 10)
            }
        }
    }

    getItemGroups() // 执行搜索并获取数据（后端会处理分页和过滤）
}

// 切换搜索区域的显示/隐藏状态
const toggleSearchArea = () => {
    showSearchArea.value = !showSearchArea.value // 切换显示状态
}

// 刷新数据列表
const refreshData = () => {
    getItemGroups() // 重新获取数据
    ElMessage.success('数据已刷新')
}

// 切换浏览器全屏模式
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen() // 进入全屏
    } else {
        document.exitFullscreen() // 退出全屏
    }
}
// 清空搜索条件
const clearSearch = () => {
    searchForm.Code = '' // 清空编码搜索条件
    searchForm.Type = '' // 清空名称搜索条件
    searchForm.CustomerName = '', // 清空类型搜索条件
        searchForm.Status = '', // 群组类型搜索条件
        searchForm.From = '', // 群组类型搜索条件
        handleSearch() // 执行搜索（此时会搜索所有数据）
    ElMessage.success('搜索条件已清空')
}

// ==================== 计算属性 ====================
// 计算属性：检查是否有搜索条件
const hasSearchConditions = computed(() => {
    return searchForm.Type || searchForm.Code || searchForm.CustomerName || searchForm.Status || searchForm.From// 任一条件有值即为有搜索条件
})

// 获取当前搜索条件的文本描述
const getSearchConditionsText = () => {
    const conditions = []
    if (searchForm.Code) conditions.push(`编码: ${searchForm.Code}`)
    if (searchForm.Type) {
        // const groupType = groupTypes.value.find(type => type.id === searchForm.RoutingTypeId)
        conditions.push(`类型: ${searchForm.Type}`)
        if (searchForm.CustomerName) conditions.push(`客户: ${searchForm.CustomerName}`)
        if (searchForm.Status) conditions.push(`状态: ${searchForm.Status}`)
        if (searchForm.From) conditions.push(`来源: ${searchForm.From}`)
    }
    return conditions.join(', ') // 用逗号连接所有条件
}

// 获取搜索历史项的文本描述
const getSearchHistoryText = (item: { ItemCode: string, ItemName: string, ItemTypeId: string, ItemStatus: string, ItemFrom: string }) => {
    const conditions = []
    if (item.ItemCode) conditions.push(`编码: ${item.ItemCode}`)
    if (item.ItemName) conditions.push(`客户: ${item.ItemName}`)
    if (item.ItemTypeId) {
        // const groupType = groupTypes.value.find(type => type.id === item.ItemTypeId)
        conditions.push(`类型: ${item.ItemTypeId}`)
        if (item.ItemStatus) conditions.push(`状态: ${item.ItemStatus}`)
        if (item.ItemFrom) conditions.push(`来源: ${item.ItemFrom}`)
    }
    return conditions.join(', ') || '空搜索' // 如果没有条件则显示"空搜索"
}

// 加载搜索历史记录到搜索表单
const loadSearchHistory = (item: { ItemCode: string, ItemName: string, ItemTypeId: string, ItemStatus: string, ItemFrom: string }) => {
    searchForm.Code = item.ItemCode // 填充编码搜索条件
    searchForm.Type = item.ItemName // 填充名称搜索条件
    searchForm.CustomerName = item.ItemTypeId // 填充类型搜索条件
    searchForm.Status = item.ItemStatus // 群组类型搜索条件
    searchForm.From = item.ItemFrom // 群组类型搜索条件
    handleSearch() // 执行搜索
    ElMessage.success('已加载搜索历史')
}

// 处理键盘快捷键事件


// 处理键盘快捷键事件
const handleKeydown = (event: KeyboardEvent) => {
    // Ctrl + F 切换搜索区域显示/隐藏
    if (event.ctrlKey && event.key === 'f') {
        event.preventDefault() // 阻止默认行为
        toggleSearchArea()
    }
    // F5 刷新数据
    if (event.key === 'F5') {
        event.preventDefault() // 阻止默认行为
        refreshData()
    }
}


//#endregion
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    margin: 0 5px;
    margin-top: 8px;
}

.item-group-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.top-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 操作按钮区域样式 */
.action-section {
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-status {
    width: 100%;
    margin-bottom: 5px;
}

.search-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.search-input {
    width: 150px;
    flex-shrink: 0;
}

.search-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.history-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
}

.delete-btn {
    background-color: #f56c6c;
    border-color: #f56c6c;
}

.delete-btn:hover {
    background-color: #f78989;
    border-color: #f78989;
}

.utility-icons {
    display: flex;
    gap: 15px;
}

.icon-btn {
    font-size: 18px;
    color: #606266;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.3s;
}

.icon-btn:hover {
    color: #409eff;
    background-color: #f0f9ff;
}

.icon-btn.active {
    color: #409eff;
    background-color: #f0f9ff;
}

.table-section {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.data-table {
    width: 100%;
}

.search-icon {
    margin-left: 5px;
    font-size: 12px;
    color: #909399;
}

.sort-icon {
    margin-left: 3px;
    font-size: 12px;
    color: #909399;
}

.action-link {
    color: #409eff;
    text-decoration: none;
    margin: 0 5px;
}

.delete-link {
    color: #f56c6c;
}

.pagination-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.data-summary {
    color: #606266;
    font-size: 14px;
}

.pagination-controls {
    display: flex;
    align-items: center;
}

.pagination-controls .el-pagination {
    margin: 0;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 搜索区域动画 */
.search-slide-enter-active,
.search-slide-leave-active {
    transition: all 0.3s ease;
}

.search-slide-enter-from,
.search-slide-leave-to {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
}

.search-slide-enter-to,
.search-slide-leave-from {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .top-section {
        flex-direction: column;
        align-items: stretch;
    }

    .search-controls {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .search-input {
        width: 100%;
        min-width: 120px;
    }

    .action-section {
        padding: 10px 15px;
    }

    .action-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .utility-icons {
        justify-content: center;
    }

    .pagination-section {
        flex-direction: column;
        gap: 15px;
    }
}

/* ----------------------------------------------------- */
.flow-container {
    position: relative;
    height: 800px;
}

.top-container {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    /* border-bottom: 1px solid #7300ff; */
}

.left-panel {
    position: absolute;
    left: 0;
    top: 120px;
    width: 200px;
    padding: 10px;
    background: rgba(245, 247, 250, 0.9);
    border-right: 1px solid #e4e7ed;
}

.right-panel {
    position: absolute;
    right: 0;
    top: 60px;
    width: 200px;
    padding: 10px;
    background: rgba(245, 247, 250, 0.9);
    border-left: 1px solid #e4e7ed;
}

.drag-item {
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    text-align: center;
    cursor: move;
}

.start-node {
    background-color: rgba(103, 194, 58, 0.8);
    color: white;
}

.end-node {
    background-color: rgba(245, 108, 108, 0.8);
    color: white;
}

.custom-node {
    background-color: rgba(64, 158, 255, 0.8);
    color: white;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.panel-content {
    display: grid;
    gap: 10px;
}

.controls {
    position: relative;
    top: -4px;
    left: -10px;
}


.el-date-table-cell__text.has-dot::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    bottom: -10;
    left: 50%;
    transform: translateX(-50%);
}
</style>